<template>
  <div class="noticeForm">
    <!-- 表格 -->
    <el-card class="box-card animate__animated animate__fadeInLeft">
      <el-form :inline="true" class="demo-form-inline action">
        <el-form-item>
          <el-button color="#1890ff" :icon="Plus" @click="handleCreate"
            >新增</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            color="#626aef"
            :icon="EditPen"
            size="default"
            v-has="'user-patch-delete'"
            >删除</el-button
          >
        </el-form-item>
      </el-form>
      <el-table :data="noticeList" style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="100"
        ></el-table-column>
        <el-table-column
          v-for="item in columns"
          :prop="item.prop"
          :label="item.label"
          :key="item.prop"
          :width="item.width"
          :formatter="item.formatter"
        />
        <el-table-column label="操作" width="300">
          <template #default="scope">
            <el-button
              size="small"
              @click="handleEdit(scope.row)"
              type="primary"
              >编辑</el-button
            >
            <el-button type="danger" size="small" @click="handleDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>

  <!-- 添加公告 -->
  <div class="continer-box">
    <el-dialog
      ref="dialogForm"
      append-to-body
      title="添加公告"
      v-model="outerVisible"
      width="60%"
      height="80%"
    >
      <el-form
        :inline="true"
        label-width="120px"
        :model="noticeForm"
        ref="dialogForm"
        :rules="rules"
      >
        <el-form-item label="公告标题" style="width: 40%" prop="noticeTitle">
          <el-input
            placeholder="请输入公告标题"
            v-model="noticeForm.noticeTitle"
          />
        </el-form-item>
        <el-form-item label="公告类型" style="width: 40%" prop="noticeType">
          <el-select
            placeholder="请选择公告类型"
            v-model="noticeForm.noticeType"
            style="width: 100%"
            :formatter="formatter"
          >
            <el-option label="通知" :value="0" />
            <el-option label="公告" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-radio-group v-model="noticeForm.state" class="ml-4">
            <el-radio label="1" size="large" :value="1">正常</el-radio>
            <el-radio label="2" size="large" :value="2">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发布内容" style="width: 100%" prop="noticeContent">
          <div class="editor">
            <quill-editor
              v-model:content="noticeForm.noticeContent"
              content-type="html"
              theme="snow"
            ></quill-editor>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit"> 确认 </el-button>
          <el-button @click="handleClose">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { onMounted, ref, getCurrentInstance, reactive, toRaw } from 'vue'
import utils from '@/utils/utils'
import { Plus, EditPen } from '@element-plus/icons-vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { useUserStore } from '@/stores/index'
const userStore = useUserStore()
const userInfo = userStore.state.userInfo
// console.log(userInfo)
//   获取Composition API 上下文对象
const { ctx } = getCurrentInstance()
// 获取全局挂载的属性
const { $api, $message } =
  getCurrentInstance().appContext.config.globalProperties
const noticeList = ref([])
const userName = userInfo.userName
const notice = reactive({
  userName: ''
})
const outerVisible = ref(false)
const noticeForm = reactive({})
const action = ref('create')
onMounted(() => {
  getNoticeList()
})
// 获取公告数据
const getNoticeList = async () => {
  try {
    const list = await $api.getNoticeList(notice)
    let newList = list.map((item) => {
      if (item.noticeContent) {
        item.noticeContent = item.noticeContent.replace(/<\/?p>/g, '')
      }
      return item
    })
    noticeList.value = newList
    console.log(noticeList.value)
  } catch (error) {
    throw new Error(error)
  }
}

// 打开公告面板
const handleCreate = () => {
  action.value = 'add'
  outerVisible.value = true
}

// 关闭公告面板
const handleClose = () => {
  outerVisible.value = false
  handleReset('dialogForm')
}

// 定义表格列数据
const columns = reactive([
  {
    label: '公告标题',
    prop: 'noticeTitle',
    width: 180
  },
  {
    label: '公告内容',
    prop: 'noticeContent',
    width: 200
  },
  {
    label:'公告类别',
    prop: 'noticeType',
    formatter(row, column, value) {
      console.log(column)
      console.log(row, column, value)
      return {
        0: '通知',
        1: '公告'
      }[value]
    }
  },
  {
    label: '发布者',
    prop: 'userName',
    width: 200
  },
  {
    label: '发布时间',
    prop: 'createTime',
    width: 200,
    formatter: (row, column, value) => {
      return utils.formateDate(new Date(value))
    }
  }
])

const rules = reactive({
  noticeTitle: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
  noticeType: [{ required: true, message: '请输入公告类型', trigger: 'blur' }],
  state: [{ required: true, message: '请选择一个选项', trigger: 'change' }],
  noticeContent: [
    { required: true, message: '请输入发布内容', trigger: 'blur' }
  ]
})

// 提交确认
const handleSubmit = () => {
  ctx.$refs.dialogForm.validate(async (valid) => {
    if (valid) {
      let params = toRaw(noticeForm)
      params.action = action.value
      params.userName = userName
      console.log(params)
      await $api.noticeOperate(params)
      outerVisible.value = false
      $message.success('增加成功')
      getNoticeList()
    }
  })
}

// 编辑
const handleEdit = (row) => {
  action.value = 'edit'
  outerVisible.value = true
  ctx.$nextTick(() => {
    Object.assign(noticeForm, row)
  })
}

const handleDel = (_id) => {
  console.log(_id)
}
</script>
<style lang="scss">
.box-card {
  margin-top: 25px;
}
.pagination {
  margin-top: 1.5rem;
  display: flex;
  justify-content: end;
}

.continer-box {
  height: 80vh;
}
.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 500px;
  }
}
.editor {
  height: 15rem;
}
</style>
